/**
 * Created by guiyongdong on 16/10/6.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    TouchableOpacity,
    PixelRatio,
    ScrollView,
    Dimensions,
    Platform
} from 'react-native';

import NavigationBar from 'react-native-navbar';

var WindowWidth = Dimensions.get('window').width;

export default class Found extends Component {

    _itemClick(index){
        alert(index);
    }

    render() {
        var views = [];
        var titles = ['快递查询','滴滴出行','易到用车','e代驾','手机充值'];
        var images = [
                        require('../resoure/found/express.png'),
                        require('../resoure/found/didiTaxi.png'),
                        require('../resoure/found/edrive.png'),
                        require('../resoure/found/drive.png'),
                        require('../resoure/found/TelephonePay.png')];

        for (var i = 0; i < 5; i++){
            var view = <TouchableOpacity key={'found'+i} style={styles.item} onPress={this._itemClick.bind(this,i)}>
                    <View  style={[styles.item]}>
                        <Image source={images[i]} style={styles.image} />
                        <Text style={styles.text}>{titles[i]}</Text>
                    </View>
                </TouchableOpacity>;
            views.push(view);
        }

        var marginTop = 0;
        if(Platform.OS == 'android'){
            marginTop = 20;
        }
        return(
            <View style={styles.container}>
                <NavigationBar
                    tintColor='white'
                    title={{'title':'发现'}}
                />
                <ScrollView style={styles.container}>
                    <View style={[styles.scrollView,{marginTop:marginTop}]}>
                        {views}
                        <View style={[styles.collineView,{left:WindowWidth/3.0}]} />
                        <View style={[styles.collineView,{left:WindowWidth/3.0*2}]} />
                        <View style={[styles.rowLineView,{top:WindowWidth/3.0}]}/>
                        <View style={[styles.rowLineView,{top:WindowWidth/3.0*2}]}/>
                    </View>
                </ScrollView>
            </View>

        );
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#F2F2F2'
    },
    scrollView:{
        flexDirection:'row',
        flexWrap:'wrap',
        marginTop:0,
        height:Dimensions.get('window').width,
        width:Dimensions.get('window').width,
        backgroundColor:'white'
    },
    item:{
        width:Dimensions.get('window').width/3.0,
        height:Dimensions.get('window').width/3.0,
        marginLeft:0,
        marginTop:0,
        alignItems:'center'
    },
    image:{
        width:30,
        height:30,
        marginTop:(Dimensions.get('window').width/3.0 - 30)/2.0-15
    },
    text:{
        height:20,
        fontSize:14,
        color:'#282828',
        marginTop:10
    },
    collineView:{
        height:WindowWidth,
        width:1/PixelRatio.get(),
        backgroundColor:'#DCDCDC',
        position:'absolute',
        top:0
    },
    rowLineView:{
        width:WindowWidth,
        height:1/PixelRatio.get(),
        backgroundColor:'#DCDCDC',
        position:'absolute',
        left:0
    }
});